 

	<!-- layui / 轮播图 start-->
	<!-- 框架的组件文档 "https://www.layui.com/doc/modules/carousel.html" -->
	<div class="layui-carousel" id="test1">
	  	<div carousel-item>
		    <div class="carousel-item"><img src="http://b-ssl.duitang.com/uploads/blog/201505/18/20150518025109_Lfmcx.jpeg" style="width: 100%;height: 100%" ></div>
		    <div class="carousel-item"><img src="http://img3.imgtn.bdimg.com/it/u=2208162519,4010854312&fm=26&gp=0.jpg" style="width: 100%;height: 100%" ></div>
		    <div class="carousel-item"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2472153115,3034378969&fm=26&gp=0.jpg" style="width: 100%;height: 100%" ></div>
	  	</div>
	</div>

	<script type="text/javascript">
		//轮播图初始化
		layui.use('carousel', function(){
	  	var carousel = layui.carousel;
	  	    
		  //建造实例
		  carousel.render({
		    elem: '#test1'
		    ,width: '100%' //设置容器宽度
		    ,arrow: 'always' //始终显示箭头
		    //,height:'100%'
		  });
		});
		//事件监听
		$('.layui-carousel .carousel-item').click(function(){
			console.log($(this).index());
			//dosomething
		});
	</script>
	<!-- layui / 轮播图 end-->
